<template>
  <div>
    <div>
      <a-image
          class="container"
          :width="widthDu"
          :src="src"
          loading="lazy"
          :preview="false"
          footerPosition="outer"
          :description="description"
          style=" vertical-align: top;border-radius: 20px"
      />
    </div>
  </div>

</template>

<script setup>
defineProps({
  title: {
    required: false,
    default: ''
  },
  src: {
    required: true
  },
  description: {
    required: true
  },
  widthDu: {
    required: false,
    default: '220px'
  },
})
</script>

<style scoped>
:deep(.arco-image-img) {
  margin-bottom: 20px;
  height: 220px;
}

:deep(.arco-image-footer-caption-description) {
  white-space: nowrap;
  margin-bottom: 2rem;
}

:deep(.arco-image-footer-caption-description) {
  text-align: center;
}

.container {
  cursor: pointer;
}

</style>